<template>
  <ContentWrap>
    <el-form
      class="-mb-15px"
      :model="queryParams"
      ref="queryFormRef"
      :inline="true"
      label-width="100px"
    >
      <el-form-item label="桌台分类" prop="categoryId">
        <el-select
          v-model="queryParams.categoryId"
          placeholder="请选择桌台分类"
          clearable
          class="!w-200px"
        >
          <el-option label="全部" value="" />
          <el-option label="双人桌" value="1" />
        </el-select>
      </el-form-item>
      <el-form-item label="座位状态" prop="status">
        <el-select
          v-model="queryParams.status"
          placeholder="请选择座位状态"
          clearable
          class="!w-200px"
        >
          <el-option label="全部" value="" />
          <el-option label="空闲中" value="0" />
          <el-option label="占用中" value="1" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
      </el-form-item>
    </el-form>
  </ContentWrap>

  <!-- 列表 -->
  <el-row :gutter="24">
    <el-col :span="6" v-for="(item, index) in list" :key="index">
      <el-card shadow="never" @click="openDrawer(item)" class="cursor-pointer">
        <template #header>
          <div class="flex justify-between p-5px">
            <span>{{ item.name }}</span>
            <el-icon class="cursor-pointer">
              <Calendar />
            </el-icon>
          </div>
        </template>
        <div
          class="flex flex-col text-center"
          :class="item.status == 1 ? 'text-red-400' : 'text-gray-400'"
        >
          <div class="text-36px font-bold">{{ item.displayText }}</div>
          <div class="text-20px font-bold">{{ item.status == 1 ? '占用中' : '空闲中' }}</div>
        </div>
        <template #footer>
          <div class="p-5px text-center">{{ item.orderTime }}</div>
        </template>
      </el-card>
    </el-col>
  </el-row>

  <!-- 抽屉 -->
  <TradeDeskOrderDrawer
    :drawerVisible="drawerVisible"
    :selectedDesk="selectedDesk"
    @close="handleClose"
  />
</template>

<script setup>
import { ref, reactive } from 'vue'
import { Calendar } from '@element-plus/icons-vue'
import TradeDeskOrderDrawer from './components/DeskOrderDrawer.vue'

defineOptions({ name: 'TradeDeskCashier' })

const message = useMessage()

const loading = ref(false)
const list = ref([])
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  categoryId: '',
  status: ''
})
const queryFormRef = ref()
const drawerVisible = ref(false)
const selectedDesk = ref({})

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.pageNo = 1
  getList()
}

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value?.resetFields()
  handleQuery()
}

/** 查询列表 */
const getList = async () => {
  // TODO 通过 WebSocket 实时监听是否需要拉取最新数据以便减少轮询次数
  loading.value = true
  try {
    list.value = [
      {
        name: '测试店铺',
        status: 0,
        orderTime: '2024-12-23 11:46:51',
        displayText: 'Y1',
        products: [
          {
            image:
              'https://apidc.yixiang.co/admin-api/infra/file/4/get/26d57ee91248d4378d381ac7c6b5e5afbe350297363c369b954d0f2075f5c96f.jpeg',
            name: '肉松咩咩',
            price: '￥2',
            quantity: ' x 2',
            status: '未出单'
          },
          {
            image:
              'https://apidc.yixiang.co/admin-api/infra/file/4/get/ad0cc3947ff9a41caceab6207e13982beed27559b9bfc311128e5992cc702056.jpg',
            name: '饮料',
            price: '￥0.05',
            quantity: ' x 5',
            status: '未出单'
          }
        ]
      },
      {
        name: '测试店铺',
        status: 1,
        orderTime: '2024-12-23 11:46:51',
        displayText: 'Y2',
        products: [
          {
            image:
              'https://apidc.yixiang.co/admin-api/infra/file/4/get/26d57ee91248d4378d381ac7c6b5e5afbe350297363c369b954d0f2075f5c96f.jpeg',
            name: '肉松咩咩',
            price: '￥2',
            quantity: ' x 2',
            status: '未出单'
          },
          {
            image:
              'https://apidc.yixiang.co/admin-api/infra/file/4/get/ad0cc3947ff9a41caceab6207e13982beed27559b9bfc311128e5992cc702056.jpg',
            name: '饮料',
            price: '￥0.05',
            quantity: ' x 5',
            status: '未出单'
          }
        ]
      }
      // 其他数据...
    ]
  } finally {
    loading.value = false
  }
}

/** 打开抽屉 */
const openDrawer = (desk) => {
  if (desk.status == 0) {
    return message.warning('该桌台没有用餐订单信息')
  }
  selectedDesk.value = desk
  drawerVisible.value = true
}

/** 关闭抽屉 */
const handleClose = () => {
  drawerVisible.value = false
}

/** 初始化 **/
onMounted(async () => {
  await getList()
})
</script>
